前言

我是平面設計出身的，隨著網路時代的發展，漸漸的從平面轉數位廣告視覺甚至網頁視覺設計。

身為一個設計師，我一直很希望我設計的東西能夠讓前端工程師能切得更順利，(當然也減少他們一直退我件教我修改或是補東西的機率....)，除了圖層命名好，該做hover元件跟下拉選單展開後的元件也不能少，其次就是常被詬病的「你這樣排，要怎麼RWD？！」

所以我剛開始聽說Bootstrap 4這套框架時覺得很神，只要照他的網格排版，RWD小事一樁！所以我就一直很想搞懂它，但我從沒搞懂過！從沒！網路上看了很多篇文章看來看去似懂非懂，直到我開始接觸前端。

所以我寫下這篇，是想幫助跟我有同樣困擾的設計師們。

內文

原理我就不說了，只講視覺上要怎麼排版，排版原則是什麼。
1.內容最大寬度是1140px

2.1140px左右內縮15px是預設的網頁邊界留白
3.然後再分成12格，每格寬度65px(Column Width)，間距是30px(Gutter Width)

我們的內容只要照格線走，就會很好切版

就是這麼簡單！

所以如果你要拉一個參考線的話，請拉1140px寬，左右先拉15px進來之後，再拉12個65px寬的格子，格子與格子之間的間隔是30px。
我個人喜歡用illustrator的「分割成網格」功能，用一個1110px寬的方塊配上物件>路徑>分割成網格
然後照我這樣設定，就可以輕鬆快速地拉出BS4的網格參考線來唷！

Q&A

• 那那些飛來飛去的裝飾元件怎麼辦，也要對齊網格嗎？
  • 答：不用，那些東西可以不用受網格限制影響，但飛來飛去的東西越多，切起來越麻煩....
• 我可以讓東西超出網格一點嗎？
  • 答：如果只超出的範圍在15px以內還好解決，因為兩個65px之間的間距其實是15+15=30px，他是左邊人左右推15px，右邊那個人也左右推15px推出來的兩個人的間距，所以有時候設計的東西可以跑出網格範圍一點點，但如果你沒有特別註明，工程師應該會幫你把它塞回去。
    
• 電腦版我看懂了，那手機版RWD要怎麼排？
  • 答：這個我們下一篇再解釋。